<template>
	<div>
		<el-form ref="userform" style="width:100%;" :rules="rules" :model="data" label-width="100px" label-position="right">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item v-if="this.data.id == null" label="用户账号" prop="name">
						<el-input v-model="data.name" style="width:180px"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item v-if="this.data.id == null" label="管理员">
						<el-checkbox v-model="data.isSuper"></el-checkbox>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item v-if="this.data.id == null" label="密码" prop="password">
						<el-input v-model="data.password" type="password" style="width:180px"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item v-if="this.data.id == null" label="确认密码" prop="secondPassword">
						<el-input v-model="data.secondPassword" type="password" style="width:180px"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="人员名称" prop="staffName">
						<el-input v-model="data.staffName" style="width:180px"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="性别" prop="sex">
						<el-select v-model="data.sex" placeholder="请选择">
							<el-option v-for="item in sexoptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<div>
						<el-form-item label="年龄">
							<el-input v-model="data.age" style="width:180px"></el-input>
						</el-form-item>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="电话 ">
						<el-input v-model="data.phone" style="width:180px" placeholder="电话 "></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="data.email" style="width:100%" placeholder="邮箱"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item style="margin-top: 30px ">
				<el-button style='width:120px' type="primary" @click="OnSubmit">保存</el-button>
				<el-button style='width:120px' @click="Hiden">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import selectBox from '../../../Common/selectBox.vue'
	export default {
		components: {
			selectBox
		},
		mounted() {
			// this.ajax({
			//     url: 'SystemStaff/GetNullData?dataType=1',
			//     success: function(data) {
			//         this.initData = data;
			//         if (this.editData != null) {
			//             this.data = this.editData;
			//             this.data.age = Number.parseInt(this.data.age);
			//         } else {
			//             this.data = JSON.parse(JSON.stringify(this.initData));
			//             this.userData = this.data.systemUserDto;
			//         }
			//     }
			// });
		},
		props: ['editData'],
		data() {
			var checkPassword = (rule, value, callback) => {
				if(this.data.password != this.data.secondPassword) {
					return callback(new Error('密码和确认密码不一致'));
				} else {
					callback();
				}
			};
			return {
				sexoptions: [{
					value: '1',
					label: '男'
				}, {
					value: '2',
					label: '女'
				}],
				sex: '1',
				data: {},
				rules: {
					name: [{
						required: true,
						message: '请输入用户账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					secondPassword: [{
						required: true,
						message: '请输入确认密码',
						trigger: 'blur'
					}, {
						validator: checkPassword,
						trigger: 'blur'
					}],
					staffName: [{
						required: true,
						message: '请输入人员名称',
						trigger: 'blur'
					}],
//					sex: [{
//						required: true,
//						message: '请选择性别',
//						trigger: 'change'
//					}],
					email: [{
						//required: true,
						message: '请输入邮箱地址',
						trigger: 'blur'
					}, {
						type: 'email',
						message: '请输入正确的邮箱地址',
						trigger: 'blur,change'
					}]
				},
				initData: {}
			}
		},
		methods: {
			OnSubmit() {
				this.$refs['userform'].validate((valid) => {
					if(valid) {
						let apiAction = this.data.id == null ? "addUser" : "editUser";
						if(this.data.id != null) {
							this.data.name = "123123"; //由于数据效验，编辑时做假数据，但是后台不处理
							this.data.password = "123123";
						}
						console.log(this.data)
						this.data.isSuper=this.data.isSuper==true ? 1 : 0;
						this.data.inUse = 1;
						this.ajax({
							url: 'tSysUser/' + apiAction,
							type: 'post',
							data: this.data
						}).then(data => {
							this.Hiden();
							this.$emit("Refresh");
						})
					} else {
						return false;
					}
				})

			},
			CheckValue() {
				// this.$refs['staffform'].validate((valid) => {
				//     if (valid) {
				if(this.data.id == null) {
					this.$refs['userform'].validate((valid) => {
						if(valid) {
							this.OnSubmit();
						} else {
							return false;
						}
					});
				} else {
					this.OnSubmit();
				}
				// } else {
				//     this.$refs['userform'].validate((valid) => {
				//         if (valid) {

				//         } else {
				//             return false;
				//         }
				//     });
				//     return false;
				// }
				// });

			},
			Hiden() {
				this.ClearData()
				this.$emit("Show", false);
			},
			ClearData() {
				this.$refs['userform'].resetFields();
				// this.$refs['staffform'].resetFields();
				this.data = JSON.parse(JSON.stringify(this.initData));
			},
			GetEditData(id) {
				this.ajax({
					url: 'SystemUser/Detail?id=' + id,
					success: function(data) {
						this.data = data;
					}
				})
			},
			checkPasswordtt(rule, value, callback) {
				//debugger;
			}
		},
		watch: {
			editData: function(newVal, oldVal) {
				this.data = newVal;
			}
		}
	}
</script>
<style>
	#age .el-form-item__label::before {
		content: '*';
		color: #ff4949;
		margin-right: 4px;
	}
</style>